<template>
  <el-popover placement="top-start" width="auto" trigger="click" ref="facePopover">
    <template #reference>
      <el-button class="px-3 text-[20px]">
        <el-icon>
          <IconSmile />
        </el-icon>
      </el-button>
    </template>
    <div class="flex flex-wrap w-[396px] ml-[1px] mt-[1px]">
      <div
        v-for="item in faceList"
        class="p-1 border border-solid border-gray-200 cursor-pointer -ml-[1px] -mt-[1px] hover:bg-gray-100 hover:border-blue-500 hover:relative"
        @click="handleSelect(item)"
      >
        <img :src="item.img" alt="" class="w-6 block" />
      </div>
    </div>
  </el-popover>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useMessageEditorStore } from '@/manager/store'

import type { IFaceItem } from '@/common/types'
import { faceList } from '@/common/constants'
import IconSmile from '@/manager/assets/img/IconSmile.vue'

const facePopover = ref()
const messageEditorStore = useMessageEditorStore()
const handleSelect = (item: IFaceItem) => {
  facePopover.value.hide()
  messageEditorStore.appendFace(item.key)
}
</script>

<style scoped></style>
